<template>
  <div class="app-container">
    <div class="text-center mb-4">
      <h2>设备详情测试页面</h2>
      <p class="text-gray-500">这个页面用于测试设备详情展示功能</p>
    </div>

    <!-- 测试控件 -->
    <div class="mb-6 p-4 bg-gray-50 rounded">
      <el-input v-model="testDeviceId" placeholder="请输入设备ID" style="width: 300px;" />
      <el-button type="primary" @click="loadDeviceData">加载设备数据</el-button>
      <el-button @click="loadMockData">加载模拟数据</el-button>
    </div>

    <!-- 设备详情展示区域 - 与原始详情页面相同的结构 -->
    <div v-if="loading" class="text-center py-10">
      <el-loading-spinner size="large"></el-loading-spinner>
      <p class="mt-2">正在加载数据...</p>
    </div>

    <div v-else class="device-detail-container">
      <!-- 基本信息标签页 -->
      <el-card class="mb-4">
        <template #header>
          <div class="card-header">
            <span>设备基本信息</span>
          </div>
        </template>
        
        <el-form :model="detailData" label-width="120px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备编号">
                <span>{{ detailData.deviceCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备类型">
                <span>{{ detailData.typeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备型号">
                <span>{{ detailData.model }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备品牌">
                <span>{{ detailData.brandName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属部门">
                <span>{{ detailData.deptName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用人员">
                <span>{{ detailData.userName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备用途">
                <span>{{ detailData.purposeName || '无' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 错误信息显示 -->
      <div v-if="errorMessage" class="error-message">
        <el-alert :message="errorMessage" type="error" show-icon />
      </div>

      <!-- 原始数据展示，方便调试 -->
      <el-card class="mt-4">
        <template #header>
          <div class="card-header">
            <span>原始数据 (调试用)</span>
          </div>
        </template>
        <pre>{{ JSON.stringify(detailData, null, 2) }}</pre>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入必要的API
import { getDeviceManage } from '@/api/manage/deviceManage'

export default {
  name: 'TestDevicePage',
  components: {},
  data() {
    return {
      // 设备ID输入
      testDeviceId: '',
      // 详情数据 - 提供默认值
      detailData: {
        deviceCode: '请点击按钮加载数据',
        typeName: '',
        model: '',
        brandName: '',
        deptName: '',
        userName: '',
        purposeName: ''
      },
      // 加载状态
      loading: false,
      // 错误信息
      errorMessage: ''
    }
  },
  methods: {
    // 加载真实设备数据
    loadDeviceData() {
      if (!this.testDeviceId) {
        this.$message.warning('请输入设备ID')
        return
      }

      this.loading = true
      this.errorMessage = ''
      
      console.log('加载设备ID:', this.testDeviceId, '的数据')
      
      getDeviceManage(this.testDeviceId)
        .then(response => {
          console.log('API返回数据:', response)
          
          if (response && response.data) {
            this.detailData = {
              deviceCode: response.data.deviceCode || '无数据',
              typeName: response.data.typeName || '无数据',
              model: response.data.model || '无数据',
              brandName: response.data.brandName || '无数据',
              deptName: response.data.deptName || '无数据',
              userName: response.data.userName || '无数据',
              purposeName: response.data.purposeName || '',
              ...response.data
            }
          } else {
            this.handleError('未获取到设备数据')
          }
          
          this.loading = false
        })
        .catch(error => {
          console.error('获取设备数据失败:', error)
          this.handleError('获取设备数据失败: ' + (error.message || '未知错误'))
          this.loading = false
        })
    },
    
    // 加载模拟数据
    loadMockData() {
      this.loading = true
      this.errorMessage = ''
      
      // 模拟网络延迟
      setTimeout(() => {
        this.detailData = {
          deviceCode: 'DEV-2023-12345',
          typeName: '台式电脑',
          model: 'ThinkCentre M920t',
          brandName: '联想',
          deptName: '技术部',
          userName: '张三',
          purposeName: '开发办公',
          securityId: '2',
          sourceId: '1',
          userId: '1001',
          watermarkCode: 'WM-5678',
          watermarkInstall: '1',
          electronicKeyInstall: '1',
          mulitNetworkCardsUse: '0'
        }
        
        this.loading = false
        this.$message.success('模拟数据加载成功')
      }, 800)
    },
    
    // 处理错误
    handleError(message) {
      this.errorMessage = message
      
      // 显示模拟数据，防止页面空白
      this.detailData = {
        deviceCode: '测试设备-' + this.testDeviceId,
        typeName: '未知设备类型',
        model: '未知型号',
        brandName: '未知品牌',
        deptName: '未知部门',
        userName: '未知用户'
      }
      
      this.$message.error(message)
    }
  }
}
</script>

<style scoped>
.device-detail-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.error-message {
  margin-bottom: 16px;
}

pre {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>